import React , { Component , PropTypes } from 'react';
import dva, { connect } from 'dva';
import { routerRedux } from 'dva/router';
import styles from './Map.less';
import Map from '../components/Map/Map';
class MapTest extends React.Component{
    constructor(props){
        super(props);
        //ref获取map对象
        this.map = null;
        //绘制线的状态和数据记录(增加距离title使用)
        this.drawLine = {
            index: 0, //当前多折线的点位数
            isDraw: false,//是否是draw状态
            prePoint: [],//上一个点的经纬度
            totalDistance: 0 //总公里数
        };
        this.state = {
        }
    }
    clickGraphic(obj){
        console.log('点击图元',obj);
    }
    drawEnd(obj) {
        console.log('绘制结束',obj);
        //关闭自己记录的 恢复记录的初始状态
        this.drawLine.isDraw = false;
        this.drawLine.index = 0;
        this.drawLine.prePoint = [];
        this.drawLine.totalDistance = 0;
    }
    dragMapStart(obj){
        //区分点击地图事件的处理方式
        if(this.drawLine.isDraw){
            let dlps = [...this.props.map.drawLinePoints[this.props.map.mapDraw.data.id] || []];
            if(this.drawLine.index == 0){
                dlps.push({
                    id: `drawLine_point${new Date().getTime()}`,
                    longitude: obj.e.point.lng,
                    latitude: obj.e.point.lat,
                    markerContent: '<div class="calPoint">地点<div>',
                });
            }else{
                this.drawLine.totalDistance += this.map.calculatePointsDistance(this.drawLine.prePoint,[obj.e.point.lng,obj.e.point.lat]);
                dlps.push({
                    id: `drawLine_point${new Date().getTime()}`,
                    longitude: obj.e.point.lng,
                    latitude: obj.e.point.lat,
                    markerContent: `<div class="calPoint">${Math.floor(this.drawLine.totalDistance/10)/100}/km<div>`,
                });
            }
            this.drawLine.index += 1;
            //记录当前的点(用于下一个点的距离计算)
            this.drawLine.prePoint = [obj.e.point.lng,obj.e.point.lat];
            this.props.dispatch({
                type: 'map/updateState',
                payload: {
                    drawLinePoints: {
                        ...this.props.map.drawLinePoints,
                        [this.props.map.mapDraw.data.id]: dlps
                    }
                }
            })
        }
    }
    clickMap(obj) {
        //区分点击地图事件的处理方式
        if(this.drawLine.isDraw){
            let dlps = [...this.props.map.drawLinePoints[this.props.map.mapDraw.data.id] || []];
            if(this.drawLine.index == 0){
                dlps.push({
                    id: `drawLine_point${new Date().getTime()}`,
                    longitude: obj.e.point.lng,
                    latitude: obj.e.point.lat,
                    markerContent: '<div class="calPoint">地点<div>',
                });
            }else{
                this.drawLine.totalDistance += this.map.calculatePointsDistance(this.drawLine.prePoint,[obj.e.point.lng,obj.e.point.lat]);
                dlps.push({
                    id: `drawLine_point${new Date().getTime()}`,
                    longitude: obj.e.point.lng,
                    latitude: obj.e.point.lat,
                    markerContent: `<div class="calPoint">${Math.floor(this.drawLine.totalDistance/10)/100}/km<div>`,
                });
            }
            this.drawLine.index += 1;
            //记录当前的点(用于下一个点的距离计算)
            this.drawLine.prePoint = [obj.e.point.lng,obj.e.point.lat];
            this.props.dispatch({
                type: 'map/updateState',
                payload: {
                    drawLinePoints: {
                        ...this.props.map.drawLinePoints,
                        [this.props.map.mapDraw.data.id]: dlps
                    }
                }
            })
        }
    }
    render(){
        const {
            mapPoints,
            mapLines,
            mapPolygons,
            mapCircles,
            mapDraw,isDraw,isCloseDraw,
            mapRemove,isRemove,
            drawLinePoints,
            isClearAll
        } = this.props.map;
        if(isDraw){
            this.drawLine.isDraw = true;
        }
        let ms = [...mapPoints];
        for (let i in drawLinePoints) {
            ms = ms.concat(drawLinePoints[i]);
        }
        return (
            <div className={styles.map}>
                <span onClick={()=>{this.props.dispatch({type:'map/drawPolyline'})}}>绘制线&nbsp;</span>
                <span onClick={()=>{this.props.dispatch({type:'map/removeGraphic'})}}>删除绘制线&nbsp;</span>
                <span onClick={()=>{this.props.dispatch({type:'map/clearAll'})}}>清空&nbsp;</span>
                <Map 
                    ref={(map)=>{this.map = map}}
                    mapId={'map1'} 
                    mapPoints={ms} //地图覆盖物 点
                    mapLines={mapLines} //地图覆盖物 线
                    mapPolygons={mapPolygons}//地图覆盖物 面
                    mapCircles={mapCircles}//地图覆盖物 圆
                    mapDraw={mapDraw}//绘制图元所需的参数
                    isDraw={isDraw}//控制是否开始绘制图元
                    isCloseDraw={isCloseDraw}//控制是否手动控制关闭绘制图元
                    clickGraphic={this.clickGraphic.bind(this)}//图元点击事件
                    drawEnd={this.drawEnd.bind(this)}//绘制图元结束回调
                    clickMap={this.clickMap.bind(this)}
                    dragMapStart={this.dragMapStart.bind(this)}
                    mapRemove={mapRemove}
                    isRemove={isRemove}
                    isClearAll={isClearAll}
                />
            </div>
        )
    }
}
export default connect(({map})=>({map}))(MapTest);